<template>
  <div class="personal-center-container">
    <div class="container-title">
      <vab-card class="h-user" :skeleton="true">
        <template #header>
          <span style="font-weight: bold">用户账号</span>
        </template>
        <el-row :gutter="20">
          <el-col
            v-for="item in list"
            :key="item.corp_id"
            :lg="8"
            :md="8"
            :sm="8"
            :xl="6"
            :xs="12"
          >
            <vab-card shadow="hover">
              <el-row justify="space-between">
                <div class="row-content">
                  <div class="department-name">
                    部门名称：{{ item.department.department_name }}
                  </div>
                  <div class="department-name">
                    分类名称：{{ item.category.category_name }}
                  </div>
                  <div class="department-name">
                    企业主体：{{ item.corp_name }}
                  </div>
                  <div class="department-name">
                    群组数量：{{ item.chat_count }}
                  </div>
                  <div class="department-name">
                    好友数量：{{ item.customer_count }}
                  </div>
                </div>
              </el-row>
              <el-row justify="end">
                <el-button
                  class="but-padding"
                  type="primary"
                  @click="handleEdit(item)"
                >
                  客户群
                </el-button>
                <el-button
                  class="but-padding"
                  type="primary"
                  @click="handleCustomerEdit(item)"
                >
                  好友列表
                </el-button>
                <el-button
                  class="but-padding"
                  type="success"
                  @click="handleWechat(item)"
                >
                  发消息
                </el-button>
                <el-button
                  class="but-padding"
                  type="success"
                  @click="handleWelcome(item)"
                >
                  欢迎语
                </el-button>
              </el-row>
              <template #header>
                <el-row justify="space-between">
                  <div class="user-name">
                    <vab-icon icon="user-3-line" />
                    {{ item.user_name }}
                  </div>
                  <el-row
                    align="middle"
                    class="remark"
                    @click="remarkFun(item)"
                  >
                    <div v-if="item.remark" style="font-size: 14px">
                      {{ item.remark }}
                    </div>
                    <div v-else>
                      <span>备注</span>
                      <vab-icon
                        icon="edit-box-line"
                        style="margin-bottom: 2px !important; font-size: 14px"
                      />
                    </div>
                  </el-row>
                </el-row>
              </template>
            </vab-card>
          </el-col>
        </el-row>
        <el-row v-if="list.length == 0" justify="center">
          <el-empty description="暂无内容" />
        </el-row>
      </vab-card>
    </div>
    <edit ref="editRef" @fetch-data="fetchData" />
    <EditWechat ref="editRefWechat" @fetch-data="fetchData" />
    <EditWelcome ref="editRefWelcome" @fetch-data="fetchData" />
    <EditCustomer ref="editRefCustomer" @fetch-data="fetchData" />
    <EditRemark ref="editRefRemark" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import { userPool } from '@/api/enterpriseWeChat/department'
  import { Plus, Search } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'UserPool',
    components: {
      Edit: defineAsyncComponent(() => import('./components/TableEdit')),
      EditWechat: defineAsyncComponent(() =>
        import('./components/TableEditWechat')
      ),
      EditWelcome: defineAsyncComponent(() =>
        import('./components/TableEditWelcome')
      ),
      EditCustomer: defineAsyncComponent(() =>
        import('./components/TableEditCustomer')
      ),
      EditRemark: defineAsyncComponent(() =>
        import('./components/TableEditRemark')
      ),
    },
    setup() {
      const $baseTableHeight = inject('$baseTableHeight')
      const state = reactive({
        editRef: null,
        editRefWechat: null,
        editRefWelcome: null,
        editRefCustomer: null,
        editRefRemark: null,
        border: true,
        height: $baseTableHeight(1),
        stripe: false,
        list: [],
        listLoading: true,
      })
      const fetchData = async () => {
        state.listLoading = true
        const { data } = await userPool()
        console.log(data)
        state.list = data
        state.listLoading = false
      }
      const handleEdit = (row) => {
        state['editRef'].showEdit(row)
      }
      const handleCustomerEdit = (row) => {
        state['editRefCustomer'].showEdit(row)
      }
      const handleWechat = (row) => {
        state['editRefWechat'].showEdit(row)
      }
      const handleWelcome = (row) => {
        state['editRefWelcome'].showEdit(row)
      }
      const remarkFun = (row) => {
        state['editRefRemark'].showEdit(row)
      }
      const queryData = () => {
        fetchData()
      }
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        queryData,
        fetchData,
        remarkFun,
        handleEdit,
        handleWechat,
        handleWelcome,
        handleCustomerEdit,
        Plus,
        Search,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .but_text {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
  .h-user {
    flex-grow: 1;
  }
  .row-content {
    margin-bottom: 10px;
    .department-name {
      font-size: 12px;
      color: #7d7d7d;
      margin-top: 8px;
    }
  }
  .but-padding {
    height: 25px;
    font-size: 12px;
    padding: 0 6px;
  }
  .user-name {
    font-size: 16px;
  }
  .remark {
    cursor: pointer;
    font-size: 12px;
    color: #ecb86b;
  }
  .container-title {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  :deep() {
    .el-card__body {
      padding: 10px 15px !important;
    }
    .el-card__header {
      padding: 10px 15px !important;
    }
  }
  $base: '.personal-center';
  #{$base}-container {
    padding: 0 !important;
    background: $base-color-background !important;
    display: flex;
    flex-direction: column;
  }
</style>
